<template>
  <div class="layout-demo">
    <a-layout style="height: 100vh">
      <a-layout-header class="header">
        <icon-arrow-left
          @click="goBack"
          size="50"
          style="position: fixed; top: 3vw; left: 3vw; z-index: 999; color: white"
        />
        <div class="header-text">
          <p>瑜伽 & 冥想</p>
          <h1>瑜伽初学者</h1>
        </div>
        <a-carousel
          :autoPlay="true"
          animation-name="card"
          show-arrow="never"
          indicator-position="bottom"
          :style="{
            width: '100%',
            height: '30vh',
          }"
        >
          <a-carousel-item v-for="(image, index) in images" :key="index" :style="{ width: '80%' }">
            <img
              :src="image"
              :style="{
                width: '100%',
                height: '30vh',
                objectFit: 'cover',
              }"
            />
          </a-carousel-item>
        </a-carousel>
      </a-layout-header>
      <a-layout-content class="content">
        <a-row type="flex" justify="space-between" :gutter="[16, 16]" class="scrollable-row">
          <a-col :span="8" v-for="item in courses" :key="item.id">
            <a-card hoverable style="width: 100%" @click="activity(item.skip)">
              <template #cover>
                <img alt="example" :src="item.src" style="height: 200px; object-fit: cover" />
              </template>
              <a-card-meta :title="item.title" class="card-meta">
                <template #description>
                  <a-typography-paragraph
                    :ellipsis="{
                      rows: 2,
                      expandable: true,
                    }"
                    :style="{ width: '100%' }"
                    class="card-description"
                  >
                    {{ item.description }}
                  </a-typography-paragraph>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const images = [
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
  'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
]
const goBack = () => {
  router.go(-1)
}

// 数据
const courses = ref([
  {
    id: 1,
    title: '瑜伽初学者',
    description: '这里是课目的详细介绍，超出..2313123124353123123234124333333333333.',
    locked: false,
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    skip: '/activity',
  },
  {
    id: 2,
    title: '基本的瑜伽姿势',
    description: '基本的瑜伽背后的哲学知识很...',
    locked: true,
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    skip: '/yogaposes',
  },
  {
    id: 3,
    title: '58个轻松有趣的瑜伽 ...',
    description: '适合初学者的晨间瑜伽',
    locked: true,
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  },
  {
    id: 4,
    title: '58个轻松有趣的瑜伽 ...',
    description: '适合初学者的晨间瑜伽',
    locked: true,
    src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  },
])

const activity = (skip) => {
  router.push(skip)
}
</script>

<style scoped>
.layout-demo {
  height: 100vh;
  overflow: hidden;
}

.header {
  height: 50vh;
  background-color: #87ceeb; /* 浅蓝色 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header-text {
  text-align: center;
  color: white;
  margin-bottom: 20px;
}

.header p {
  font-size: 1.2rem;
  margin: 0;
}

.header h1 {
  font-size: 2rem;
  margin: 0;
}

.content {
  height: 50vh;
  background-color: #f5f5dc; /* 米白色 */
  padding: 20px;
  overflow-x: auto; /* 允许水平滚动 */
}

.scrollable-row {
  display: flex;
  flex-wrap: nowrap; /* 不换行 */
  overflow-x: auto; /* 允许水平滚动 */
  scrollbar-width: none; /* 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge */
}

.scrollable-row::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.ant-card {
  transition: transform 0.3s ease-in-out;
}

.ant-card:hover {
  transform: translateY(-10px);
}

.ant-card-cover img {
  height: 200px;
  object-fit: cover;
}

.card-meta {
  font-size: 14px; /* 减小标题字体大小 */
}

.card-description {
  font-size: 12px; /* 减小描述字体大小 */
}
</style>
